<!-- 从业者-在线学习-在线课程详情 -->
<template>
	<view class="study-container">
		<view class="user-card-container">
			<!-- 主卡片 -->
			<view class="user-card">
				<!-- 用户信息 -->
				<!-- 课程名称 -->
				<view class="course-list">
					<view class="course-item" v-for="(course, index) in courseList" :key="index">
						<view class="course-left">
							<!-- <u-image :src="course.bc_logo_uri[0].url" width="168rpx" height="224rpx" mode="aspectFill" radius="4"></u-image> -->
							<u-image :src="course.bc_logo_uri && course.bc_logo_uri[0] && course.bc_logo_uri[0].url ? course.bc_logo_uri[0].url : ''" width="168rpx" height="224rpx" mode="aspectFill" radius="4"></u-image>
							<!-- job.kzinfo && job.kzinfo.bkz_logo_uri && job.kzinfo.bkz_logo_uri[0] && job.kzinfo.bkz_logo_uri[0].url ? job.kzinfo.bkz_logo_uri[0].url : '' -->
						</view>
						<view class="course-right">
							<text class="course-name">{{ course.bc_name }}</text>
							<text class="course-level">专业等级：{{ course.bc_zylevel }}</text>
							<!-- <text class="course-teacher">讲师：{{ course.teacher }}</text> -->
							<view class="course-footer">
								<text class="course-count">{{jieshu}}节</text>
								<text class="course-count">|</text>
								<text class="course-price">¥{{ course.bc_price }} 元</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 第二部分 -->
		<view class="floating-stats">
			<view class="course-tabs">
				<u-tabs :list="tabs" :current="currentTab" @change="changeTab" activeColor="#03B8CD" inactiveColor="#606266"
					barWidth="80" :offset="offset" item-width="50%" bg-color="#f0f0f0"></u-tabs>
			</view>
			<!-- 内容 -->
			<view v-if="currentTab === 0" class="teacher-section">
				<!-- <view class="section-title">讲师介绍</view> -->
				<scroll-view class="teacher-scroll" scroll-x="true" show-scrollbar="false">
					<view class="teacher-list">
						<view class="teacher-card" v-for="(teacher, index) in teachers" :key="index">
							<!-- 图片左 -->
							<view class="course-left">
								<u-image :src="teacher.bt_header_uri[0].url" width="120rpx" height="160rpx" mode="aspectFill" radius="4"></u-image>
							</view>
							<!-- 讲师基本信息 -->
							<view class="teacher-detail">
								<text class="teacher-name">{{ teacher.bt_name }}</text>
								<text class="teacher-info">{{ teacher.bt_zhicheng }} | 从业{{ changetWorkdate(teacher.bt_workdate) }}年</text>

								<!-- 专业领域 -->
								<view class="skill-tags">
									{{teacher.bt_zyly}}
<!-- 									<text v-for="(skill, skillIndex) in teacher.skills" :key="skillIndex" class="skill-tag">
										{{ skill }}
									</text> -->
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- 图片 -->
				<!-- 课程介绍 -->
				<view class="teacher-explain">
					<!-- <view class="section-title">介绍</view> -->
					<view class="teacher-content">
						<text class="teacher-text">{{ courseInfo.introduction }}</text>
					</view>
					<view class="teacher-img">
						<u-image v-if="courseInfo.introImage" :src="courseInfo.introImage" width="100%" height="300rpx"
							mode="widthFix" radius="8" class="teacher-image"></u-image>
					</view>
				</view>
				<!-- </view>		 -->
			</view>

			<!-- 讲师介绍 -->
			<view class="chapter-container" v-if="currentTab === 1">
				<!-- 进度模块 -->
				<view class="chapter-schedule">
					<view class="progress">
						<u-line-progress :percent="learned" :round="true" active-color="#03B8CD" class="progress"></u-line-progress>
					</view>
					<view class="progress-text">
						<text class="chapter-title">已学{{learned}}%</text>
					</view>
				</view>
				
				<!-- 章节列表 -学习-->
				<view class="chapter-list" v-if="isbuy === '1'">
		    	<!-- 遍历所有章节 -->
					<!-- 章节1 - 已学完 -->
					<view class="chapter-item completed" v-for="chapter in chaptersWithMaterials" @click="coursePlay">
						<view class="chapter-header">
							<text class="chapter-title">{{chapter.kcbinfo[0].bckcb_res_name}}</text>							
						</view>

						<view class="lesson-play"  v-for="material in chapter.materials">
							<view class="lesson-item">
								<view class="lesson-info">
									<text class="lesson-name">{{material.kcbinfo[0].bckcb_res_name }}</text>									
								</view>
								<view class="">
									<text class="lesson-fortry">{{material.kcbinfo[0].bckcb_res_fortry == 1 ? "试学" : "" }}</text>	
									<u-icon v-if="material.kcbinfo[0].bckcb_res_fortry == 1 || isbuy == 1" name="play-circle-fill" color="#03B8CD" size="50"></u-icon>	
									<u-icon v-else name="lock-fill" color="#909399" size="50"></u-icon>
								</view>		
							</view>
							<view class="">
								<text class="lesson-duration">{{material.kcbinfo[0].bckcb_res_time}}</text>
								<text class="lesson-line"> | </text>
								<text class="lesson-status">{{material.cycsd_jindu}}%</text>
							</view>							
							<view class="">
								<u-line color="#d7d7d8" margin="10rpx"></u-line>
							</view>			
						</view>						
					</view>	
				</view>
				
				<!-- 章节列表 -购买-->
				<view class="chapter-list" v-else>
					<!-- 遍历所有章节 -->
					<!-- 章节1 - 已学完 -->
					<view class="chapter-item completed" v-for="chapter in chaptersWithMaterials" @click="coursePlay">
						<view class="chapter-header">
							<text class="chapter-title">{{chapter.bckcb_res_name}}</text>							
						</view>
				
						<view class="lesson-play"  v-for="material in chapter.materials">
							<view class="lesson-item">
								<view class="lesson-info">
									<text class="lesson-name">{{material.bckcb_res_name }}</text>									
								</view>
								<view class="">
									<text class="lesson-fortry">{{material.bckcb_res_fortry == 1 ? "试学" : "" }}</text>	
									<u-icon v-if="material.bckcb_res_fortry == 1 || isbuy == 1" name="play-circle-fill" color="#03B8CD" size="50"></u-icon>	
									<u-icon v-else name="lock-fill" color="#909399" size="50"></u-icon>
								</view>		
							</view>
							<view class="">
								<text class="lesson-duration">{{material.bckcb_res_time}}</text>
								<text class="lesson-line"> | </text>
								<text class="lesson-status">{{ material.cycsd_jindu ? material.cycsd_jindu : 0 }}%</text>
							</view>							
							<view class="">
								<u-line color="#d7d7d8" margin="10rpx"></u-line>
							</view>			
						</view>						
					</view>	
				</view>
				
				
				
			</view>
		</view>
		<!-- 底部操作栏 -->
		<view class="action-bar">
			<u-button type="default" shape="circle" @click="callMake" :customStyle="customStyle" plan class="buy-btn">
				客服助理
			</u-button>
			<u-button type="default" shape="circle" @click="fxUrlLine" :customStyle="customStyle" plan class="buy-btn">
				分享赚<text style="color: red;">积分</text>
			</u-button>
			<u-button type="default" v-if="isbuy == '0'"   shape="circle" @click="buyCourse" :customStyle="customStylePay" class="buy-btn">
				购买 ¥{{ courseInfo.price }}
			</u-button>
			<u-button v-else type="default" shape="circle" disabled="true" :customStyle="customStylePayBug" class="buy-btn">
				已购买
			</u-button>
		</view>

		<!-- 底部弹出的支付页面-->
		<view>
			<u-popup v-model="showInvitePopup" mode="bottom" border-radius="20" closeable>
				<view class="invitation-popup">
					<view class="popup-header">
						<text class="title">支付</text>
					</view>
					<!-- 需要支付的详情 -->
					<view class="pay-container">
						<!-- 金额汇总 -->
						<view class="card">
						  <view class="amount-item">
						    <text>订单金额</text>
						    <text>¥{{courseInfo.price}}</text>
						  </view>
						  <view class="amount-item">
						    <text>优惠折扣</text>
						    <text>-¥{{courseInfo.youhui}}</text>
						  </view>
						  <view class="total-amount">
						    <text>需支付：</text>
						    <text class="price">￥{{courseInfo.paySum}}</text>
						  </view>
						</view>
						<!-- 支付方式 -->
						<view class="card">
						  <view class="section-title">支付方式</view>
						  
						  <view class="payment-item" @click="selectPayment('wechat')">
						    <u-checkbox 
						      v-model="payment.wechat" 
						      shape="circle"
						      active-color="#07C160"
						    ></u-checkbox>
						    <view class="payment-info">
						      <image src="/static/images/wechat-pay.png" class="payment-icon"></image>
						      <text>微信支付</text>
						    </view>
						  </view>						  

						</view>
						<!-- 底部支付按钮 -->
						<view class="footer">
						  <u-button 
						    type="default" 
						    shape="circle" 
						    @click="confirmPayment"
						    :disabled="!payment.wechat && !payment.other"
								:customStyle="customStylePay"
						  >
						    确认支付
						  </u-button>
						</view>						
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import { isBuffer, toInteger } from 'lodash';
import util from '@/utils/util.js'
	export default {
		data() {
			return {
				learned: 0 , ////已学习的总体进度
				courseList: [{
					id: 1,
					cover: '/static/course1.jpg',
					name: '前端开发高级课程',
					level: '一级',
					rating: 3.4,
					teacher: '张老师',
					lessonCount: 45,
					price: '80.00',
					category: '前端开发'
				}],
				currentTab: 0,
				offset:[5,20],
				tabs: [{
						name: '介绍'
					},
					{
						name: '课程表'
					}
				],
				stats: [{
						value: 24,
						label: '积分'
					},
					{
						value: 15,
						label: '粉丝'
					},
					{
						value: 8,
						label: '关注'
					},
					{
						value: 10,
						label: '消息'
					}
				],
				teachers: [{
						cover: '/static/course1.jpg',
						name: '张老师',
						title: '高级前端工程师',
						experience: 8,
						rating: 3.4,
						skills: ['前端架构', '性能优化', 'Vue.js', 'React.js']
					},
					{
						cover: '/static/course1.jpg',
						name: '李老师',
						title: '全栈工程师',
						experience: 5,
						rating: 3.4,
						skills: ['Node.js', 'TypeScript', '前端工程化']
					},
					{
						cover: '/static/course1.jpg',
						name: '王老师',
						title: 'UI设计师',
						experience: 6,
						rating: 4.2,
						skills: ['UI设计', '交互设计', '用户体验']
					}
				],
				courseInfo: {
					introduction: '图文介绍文章图文介绍文章图文介绍文章图文介绍文章图文介绍图文介绍文章图文介绍文章图文介绍文章图文介绍文章图文',
					introImage: '/static/course-intro.jpg',
					price: '10.8',
					youhui: '2'  ,////优惠金额
					paySum: ''  ///需支付的总金额
				},
				customStyle: {
					// backgroundColor: "#D5D5D5",
					"color": "#03B8CD"
				},
				customStylePay: {
					"backgroundColor": "#03B8CD",
					"color": "#ffffff"
				},
				customStylePayBug: {
					"backgroundColor": "#d3d3d3",
					"color": "#ffffff"
				},
				// 讲师介绍
				// 实际开发中这里应该是从API获取的数据
				chapters: [{
						id: 1,
						name: "章节名称 (5)",
						status: "completed",
						lessons: [{
							name: "第一课 基础入门",
							duration: "30分钟22秒",
							status: "completed"
						}]
					},
					{
						id: 2,
						name: "章节名称 (5)",
						status: "unlocked",
						lessons: [{
							name: "第二课 进阶知识",
							duration: "30分钟22秒",
							status: "unlocked"
						}]
					},
					{
						id: 3,
						name: "章节名称 (5)",
						status: "in-progress",
						lessons: [{
							name: "第三课 实战演练",
							duration: "30分钟22秒",
							status: "in-progress",
							progress: 10
						}]
					},
					{
						id: 4,
						name: "章节名称 (5)",
						status: "locked",
						lessons: [{
							name: "第四课 高级技巧",
							duration: "30分钟22秒",
							status: "locked"
						}]
					}
				],
				// 是否弹窗
				showInvitePopup: false,
				// 支付
				goodsList: [
				  { name: '考证名称超行省略...', level: '三级', price: '123.00', count: 2 },
				  { name: '考证名称超行省略...', level: '四级', price: '123.00', count: 10 },
				  { name: '培训', level: '三级', price: '123.00', count: 2 },
				  { name: '培训', level: '四级', price: '123.00', count: 2 }
				],
				payment: {
				  wechat: true,
				  other: false
				},
				photoList: [], ///图片
				photoListId:'', ///图片ID
				base64Data: '', ///base64
			  onlineCourseCode:'', ///在线课程code
				starStudyCode: ''  ,///用户开始学习时课程code
				invitationLink: '' , //分享链接
				isbuy:'', ////是否购买
				jieshu: '', ////几节课
				// 微信支付
				appid:'',  ////wx的appid
				nonceStr: '', ///阿布字符串
				package: '', //固定值 
				paySign: '', //微信支付商户号
				signType: '', //统一下单号
				timeStamp: '', //时间戳（单位：秒杀）
				wxopenid: '', ///微信openid
				courseListInfo: [], ///获取课程列表
			}
		},
		computed: {
			// 学习
			chaptersList() {
					if(String(this.isbuy) === '1') {
						return this.chapters.filter(item => String(item.kcbinfo[0].bckcb_res_type) == '0')
					} else {
						return this.chapters.filter(item => String(item.bckcb_res_type) == '0')
					}
					
				},
				// 获取每个章节下的课件
				chaptersWithMaterials() {
					if(String(this.isbuy) === '1') {
						return this.chaptersList.map(chapter => {
							return {
								...chapter,		
								materials: this.chapters.filter(item => 
									String(item.kcbinfo[0].bckcb_res_type) === '1' && item.kcbinfo[0].bckcb_parentcode === chapter.kcbinfo[0].bckcb_code
								)
							};
						});	
					} else {
						return this.chaptersList.map(chapter => {
							return {
								...chapter,		
								materials: this.chapters.filter(item => 
									String(item.bckcb_res_type) === '1' && item.bckcb_parentcode === chapter.bckcb_code
								)
							};
						});	
					}
			
			},
		},
		onLoad(options) {
			this.onlineCourseCode = options.bccode;
			this.isbuy = options.isbuy
			console.log('参数：', this.onlineCourseCode,this.isbuy)
		},
		onShow() {
			// 已经购买才可以创建课程，并生成课程表
			if(String(this.isbuy) === '1') {
				// 创建学习任务、并查询回用户对应的新的课程明细，章节、课程
				this.createbcstar()
			} else {
				// 还未购买时，使用此方法 查询某个课程列表信息
				this.getcbDetails()
			}
			
		},
		methods: {
			createbcstar() {
				this.$u.api.createbcstudy({
					"usercode":uni.getStorageSync('usercode'), ///#从业者用户code
					"bccode":this.onlineCourseCode  ////#课程的code
				}).then(res => {
					console.log('开始学习', res)
					this.starStudyCode = res.data.base_info
					// 读取课程基础信息
					this.getcbDetails()
					// 加载课程表
					this.startStudyDetails()
				})
			},
			
			// 获取在线课程列表，主要为了取得是否购买的信息
			getbcList() {
				this.$u.api.querybclist({
					"usercode": uni.getStorageSync('usercode')
				}).then(res =>{					
					this.courseListInfo = res.data.base_info
					let listInfoIsBuy = this.courseListInfo.filter(item => item.bc_code === this.onlineCourseCode)
					this.isbuy = listInfoIsBuy[0].isbuy
					this.showInvitePopup = !this.showInvitePopup;
					console.log('bclist:', res,listInfoIsBuy,this.isbuy)
				})
			},	

			// 购买状态首先用，学习状态时只用查询课程基础信息明细
			getcbDetails() {
				this.$u.api.querycb({
					"bccode": this.onlineCourseCode
				}).then(res => {
					let baseinfo = res.data.base_info
					this.courseList = []
					this.courseList.push(baseinfo)		
					console.log('查询某个课程：', res,this.courseList)
					// 加载图片、说明、价格
					this.courseInfo.introduction = baseinfo.bc_desc
					this.courseInfo.price = baseinfo.bc_price
					this.courseInfo.paySum = parseInt(this.courseInfo.price) - parseInt(this.courseInfo.youhui)
					// 加载讲师数据
					this.teachers = []
					this.teachers = res.data.base_info.bctinfo
					// console.log('查询某个讲师金额：', this.courseInfo.paySum)
					// 未购买时调用此，学时不调用
					if(String(this.isbuy) === '0') {
						// 课程表，章节、视频
						this.starcyDetails()					
					} 

				})
			},
			
			// 通过创建的开始学习的code，获取课程表明细
			startStudyDetails() {
				this.$u.api.querybcstudy({
					"cycscode":this.starStudyCode //#在线学习课程的code
				}).then(res => {
					console.log('课程表-明细', res)
					this.chapters = res.data.base_info
					this.jieshu = this.chapters.filter(item => item.kcbinfo[0].bckcb_res_type === 1).length
					this.getLearned()
				})
			},
			
			// 课程表，章节、视频
			starcyDetails() {
				this.$u.api.querybckcb({
					"bccode": this.onlineCourseCode ///#课程的code
				}).then(res =>{
					console.log('课程表：', res)
					this.chapters = []
					this.chapters = res.data.base_info;
					
				})
			},
			
			// 已经学习的总体进度
			getLearned() {
				let sumlearned = 0
				for(let i=0; i< this.chapters.length; i++) {
					sumlearned += toInteger(this.chapters[i].cycsd_jindu)
				}
				this.learned = sumlearned/this.jieshu ? sumlearned/this.jieshu : 0
			},
			
			changeTab(index) {
				this.currentTab = index;
			},
			// 联系客服
			callMake() {				
				uni.navigateTo({
					url: `/pages/Institution/mine/makePhoneCall`
				});
			},
			// 分享赚积分
			fxUrlLine() {
				this.$u.api.createyqmlink({
					"usercode": uni.getStorageSync('usercode'), //#用户code
					"params":{"linkcode":this.onlineCourseCode, "ywcode":"kcbm"}, ///要传入的参数，ywcode:  团队邀请考证报名：kzbm  ,  比赛邀请： bsbm   直播：zbbm   课程：kcbm
				}).then(res => {
					console.log('生成邀请链接：', res)
					this.invitationLink = res.data.base_info
					uni.setClipboardData({
					  data: this.invitationLink,
					  success: () => {
					    uni.showToast({
					      title: '链接已复制',
					      icon: 'success'
					    });
					  }
					});
				})
			},
			
			// 购买课程 
			buyCourse() {
				// 调用课程购买的支付页面
				// uni.navigateTo({
				// 	url: `/pages/onlinecourse/coursepay`
				// });
				this.showInvitePopup = true;
			},
			selectPayment(type) {
			  // 单选逻辑
			  if (type === 'wechat') {
			    this.payment.wechat = true
			    this.payment.other = false
			  } else {
			    this.payment.wechat = false
			    this.payment.other = true
			  }
			},
			
			// 工作年限
			changetWorkdate(workTime) {
				let workYears = util.calculateDateDifference(workTime)
				let reWrokYears = ''
				if (workYears.years == 0){
					reWrokYears = workYears.months+'个月';
				} else 	if(workYears.months == 0){
					reWrokYears = workYears.years+'年';
				} else {
					reWrokYears = workYears.years+'年'+workYears.months+'个月';
				}	
				return reWrokYears
				// console.log('工作年限：', reWrokYears)
			},
			
			
			// 图片上传开始
			// 当图片变化时
			onchange(list,name) {
				// console.log('图片变化时-name：',name)
				if(this.photoList.length == 0) {
					if(list.length != 0){
						const file = list[0]
						console.log("onchange:", file.url)
						// 处理新准备上传的照片文件（添加必要字段）
						const newFiles = list.map(item => ({
							url: item.url, // 临时路径
						}))
						this.photoList = []
						this.photoList = [...this.photoList, ...newFiles];									
			
						// 将图片转换为Base64
						util.getPhotoBase64(file.url, base64 => {
							// console.log('main-bser64', base64)
							this.base64Data = base64
							// 转换成功后上传
							this.uploadBase64()
						})								
					}
				}
				console.log("onchange-3:", this.photoList)	
			},
			
			// 上传Base64数据到服务器
			uploadBase64() {
				// console.log('upload:', this.base64Data)
				if (!this.base64Data) {
					uni.showToast({
						title: '请先选择图片',
						icon: 'none'
					})
					return
				}	
				uni.showLoading({
					title: '上传中...'
				})		
				this.$u.api.uploadres({
					"usercode": uni.getStorageSync('usercode'),
					"rescode": this.base64Data,
					"restype": "0",
					"resdesc": "上传照片"
				}).then(res => {					
					this.photoListId = res.data.base_info
					console.log('uploadres:', this.photoListId)
				})
			},
			
			
			// 删除图片
			deletePic(event,index) {
			  this.form.photoList.splice(event, 1)
				console.log('删除:',this.form)
			},
			// 图片上传结束
			
			
			// 图片上传相关方法
			afterRead(event) {
			  // 这里处理图片上传逻辑
			  const { file } = event
			  this.fileList.push({
			    url: file.url,
			    status: 'uploading',
			    message: '上传中'
			  })
			  
			  // 模拟上传成功
			  setTimeout(() => {
			    this.fileList[this.fileList.length - 1].status = 'success'
			    this.fileList[this.fileList.length - 1].message = ''
			  }, 1000)
			},
			deletePic(event) {
			  this.fileList.splice(event.index, 1)
			},
			// 支付
			confirmPayment() {
			  // if (this.payment.other && this.fileList.length === 0) {
			  //   uni.showToast({
			  //     title: '请上传转账凭证',
			  //     icon: 'none'
			  //   })
			  //   return
			  // }
			  
			  // uni.showLoading({
			  //   title: '支付处理中...'
			  // })
				// "payprice": this.courseInfo.paySum, //#支付价格
				this.$u.api.createbcorder({
					"bccode": this.onlineCourseCode , //#基础课程编号
					"usercode": uni.getStorageSync('usercode'), //#用户编号
					"wxopenid": uni.getStorageSync('wxopenid'), ///openid
					"payprice": 0.01, //#支付价格
					"yhprice":"0", //#优惠价格,若无，直接传0
					"paytype":"0", //#支付类型，0微信，1线下
				}).then(res => {
					console.log('pay:',res)
					let baseinfo = res.data.base_info
					this.appid = baseinfo.appId    ////wx的appid
					this.nonceStr= baseinfo.nonceStr  ///阿布字符串
					this.package= baseinfo.package   //固定值 
					this.paySign= baseinfo.paySign   //微信支付商户号
					this.signType= baseinfo.signType   //统一下单号
					this.timeStamp= baseinfo.timeStamp   //时间戳（单位：秒杀）	
					// 调走微信支付
					this.wxplayquestion()					
				})
			},
			// 调走微信支付
			wxplayquestion() {
				// uni.requestPayment({
				//   provider: 'wxpay',
				// 	timeStamp: this.timeStamp,
				// 	nonceStr: this.nonceStr,
				// 	package:  this.package,
				// 	signType: this.signType,
				// 	paySign:  this.paySign,
				// 	success: function (res) {
				// 		// 微信支付成功
				// 		setTimeout(()=>{
				// 			console.log('pay-success:' + JSON.stringify(res));							
				// 			uni.showToast({
				// 				title: '支付成功！',
				// 				icon: 'none'
				// 			})
				// 			this.showInvitePopup = false;
				// 			// 刷新课程列表，并取得是否购买isbuy状态
				// 			this.getbcList()
				// 		},2000)
						
				// 	},
				// 	fail: function (err) {
				// 		console.log('pay-fail:' + JSON.stringify(err));
				// 	}
				// });
				// 将 uni.requestPayment 包装为 Promise
				new Promise((resolve, reject) => {
				    uni.requestPayment({
				        provider: 'wxpay',
				        timeStamp: this.timeStamp,
				        nonceStr: this.nonceStr,
				        package: this.package,
				        signType: this.signType,
				        paySign: this.paySign,
				        success: resolve,
				        fail: reject
				    });
				})
				.then((res) => {
				    // 微信支付成功
				    setTimeout(() => {
				        console.log('pay-success:' + JSON.stringify(res));
				        uni.showToast({
				            title: '支付成功！',
				            icon: 'none'
				        });
				        this.showInvitePopup = false;
				        // 刷新课程列表，并取得是否购买isbuy状态
				        this.getbcList();
				    }, 2000);
				})
				.catch((err) => {
				    console.log('pay-fail:' + JSON.stringify(err));
				});
			},
			
			// 课程播放
			coursePlay() {
				uni.redirectTo({
				  url: `/pages/Practitioner/onlinecourse/videoplay?bccode=${this.starStudyCode}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.study-container {
		// width: 100%;
		// height: 100%;
		background-color: #516178;
	}

	/* 外层容器 */
	.user-card-container {
		position: relative;
		padding-bottom: 60rpx;
		/* 为浮动统计留出空间 */
		background-color: #516178;
		height: 235px;
		top: 10px;

	}

	/* 主卡片样式 */
	.user-card {
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		color: #ffffff;

	}

	// 课程名称
	.course-list {
		border-radius: 8rpx;
		overflow: hidden;
	}

	.course-item {
		display: flex;
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;


		&:last-child {
			border-bottom: none;
		}
	}

	.course-left {
		margin-right: 20rpx;
	}

	.course-right {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.course-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #ffffff;
		margin-bottom: 10rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.course-level,
	.course-teacher {
		font-size: 26rpx;
		color: #ffffff;
		margin-bottom: 8rpx;
	}

	.course-rating {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;

		.rating-value {
			font-size: 24rpx;
			color: #ffffff;
			margin-left: 10rpx;
		}
	}

	.course-footer {
		display: flex;
		margin-top: 10rpx;

		.course-count {
			font-size: 32rpx;
			color: #ffffff;
			margin-right: 10px;
		}

		.course-price {
			font-size: 32rpx;
			color: #ffffff;
			font-weight: bold;
		}
	}

	/* 浮动统计行样式,内容 */
	.floating-stats {
		position: absolute;
		top: 180px;
		left: 0rpx;
		right: 0rpx;
		background: #f0f0f0;
		border-radius: 40rpx 40rpx 0 0;
			
		.course-tabs {
			position: static;
			margin: 10px;
			left: 0rpx;
			right: 0rpx;
			border-radius: 40rpx 40rpx 0 0;
			background-color: #f0f0f0;
		}

		// 讲师内容
		.teacher-section {
			padding: 10rpx;
			background-color: #ffffff;
			border-radius: 12rpx;
			margin: 5px;

			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 20rpx;
			}
		}

		.teacher-scroll {
			width: 100%;
			white-space: nowrap;
			// margin-top: 20px;

			/* 隐藏滚动条 */
			::-webkit-scrollbar {
				display: none;
				width: 0;
				height: 0;
				color: transparent;
			}
		}

		.teacher-list {
			display: inline-flex;
			gap: 20rpx;
		}

		.teacher-card {
			display: inline-flex;
			flex-direction: row;
			// 每一个卡片的宽度
			width: 280px;
			padding: 20rpx;
			background-color: #ffffff;
			border-radius: 12rpx;
			white-space: normal;

			.teacher-rating {
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;

				.rating-value {
					font-size: 24rpx;
					color: #ff9900;
					margin-left: 8rpx;
				}
			}

			.teacher-detail {
				// display: none;
				display: inline-flex;
				flex-direction: column;

				.teacher-name {
					font-size: 28rpx;
					font-weight: bold;
					color: #303133;
					margin-bottom: 6rpx;
				}

				.teacher-info {
					font-size: 24rpx;
					color: #606266;
					margin-bottom: 15rpx;
				}

				.skill-tags {
					display: flex;
					flex-wrap: wrap;
					gap: 8rpx;

					.skill-tag {
						font-size: 28rpx;
						// color: #2979ff;
						// background-color: #e6f0ff;
						// padding: 4rpx 12rpx;
						border-radius: 20rpx;
						display: inline-block;
					}
				}
			}
		}


	}

	// 图片内容
	// .tab-content {
	// 	padding: 20rpx;
	// 	border-radius: 30rpx;
	// 	position: static;
	// 	// background-color: #2979ff;
	// }

	.teacher-explain {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;

		.teacher-content {
			font-size: 32rpx;
			margin-bottom: 10px;
		}


		// .teacher-text {
		// 	font-size: 32rpx;
		// 	margin-bottom: 20rpx;
		// 	padding-bottom: 16rpx;
		// 	border-bottom: 1rpx solid #eee;
		// }

		// .teacher-image {
		// 	margin-top: 50px;
		// }
	}

	// 讲师介绍
	.chapter-container {
		padding: 20rpx;
		height: 800px;
		background-color: #ffffff;
	}

	.chapter-schedule {
		display: flex;
		background-color: #ffffff;
		// margin: 5px;
		margin-bottom: 10px;
		height: 50px;
		line-height: 50px;
		border-bottom: 5px solid #f0f0f0;

		.progress {
			width: 70%;
			margin: 0 0 30px 10px;
		}
		
		.progress-text {
			margin-left: 15px;
		}
	}


	.chapter-list {
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.chapter-item {
		padding: 24rpx;
		border-bottom: 1rpx solid #eee;

		&:last-child {
			border-bottom: none;
		}

		&.completed {
			background-color: #fff;
			opacity: 0.8;
		}

		&.locked {
			opacity: 0.6;

			.lesson-name,
			.lesson-duration {
				color: #c0c4cc !important;
			}
		}
	}

	.chapter-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;

		.chapter-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
		}
	}

	.lesson-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx 0;

		.lesson-info {
			display: flex;
			align-items: center;
			gap: 15rpx;

			.lesson-name {
				font-size: 28rpx;
				color: #333;
			}		


			.lesson-status {
				font-size: 24rpx;
				color: #19be6b;
			}
		}
		
		.lesson-fortry{
			color:#F39742;
			margin-right: 10rpx;
			
		}
		


		.lesson-duration {
			font-size: 24rpx;
			color: #909399;
		}
	}
	
	.lesson-line {
		margin: 0 10rpx;
	}

	// 底部
	.action-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
		z-index: 100;

		// .action-left {
		// 	display: flex;
		// 	align-items: center;
		// 	flex: 1;

		// 	.action-item {
		// 		display: flex;
		// 		flex-direction: column;
		// 		align-items: center;
		// 		margin-right: 30rpx;

		// 		.action-text {
		// 			font-size: 22rpx;
		// 			color: #606266;
		// 			margin-top: 6rpx;
		// 		}
		// 	}

		// 	.earn-points {
		// 		.action-text {
		// 			color: #ff9900;
		// 		}
		// 	}
		// }

		.buy-btn {
			width: 200rpx;
			height: 80rpx;
		}
	}
	
	// 弹窗
	.invitation-popup {
	  height: 70vh;
	  display: flex;
	  flex-direction: column;
		
		.popup-header {
		  padding: 30rpx;
		  text-align: center;
		  border-bottom: 1rpx solid #f5f5f5;
		}
			
		.container {
		  padding: 20rpx;
		  padding-bottom: 120rpx;
		  background-color: #f7f7f7;
		  min-height: 100vh;
		}
		
		.card {
		  background-color: #fff;
		  border-radius: 12rpx;
		  padding: 24rpx;
		  margin-bottom: 20rpx;
		  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		}
		
		.goods-item {
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  padding: 20rpx 0;
		  border-bottom: 1rpx solid #f5f5f5;
		  
		  &:last-child {
		    border-bottom: none;
		  }
		}
		
		.goods-info {
		  flex: 1;
		  display: flex;
		  align-items: center;
		  overflow: hidden;
		}
		
		.goods-name {
		  font-size: 28rpx;
		  color: #333;
		  overflow: hidden;
		  text-overflow: ellipsis;
		  white-space: nowrap;
		  max-width: 40%;
		}
		
		.goods-level {
		  font-size: 24rpx;
		  color: #999;
		  margin: 0 10rpx;
		}
		
		.goods-price {
		  font-size: 26rpx;
		  color: #ff4d4f;
		}
		
		.goods-count {
		  font-size: 26rpx;
		  color: #666;
		}
		
		.amount-item {
		  display: flex;
		  justify-content: space-between;
		  margin-bottom: 16rpx;
		  font-size: 26rpx;
		  color: #666;
		}
		
		.total-amount {
		  display: flex;
		  justify-content: flex-end;
		  margin-top: 20rpx;
		  font-size: 28rpx;
		  font-weight: bold;
		  
		  .price {
		    color: #ff4d4f;
		    margin-left: 10rpx;
		  }
		}
		
		.section-title {
		  font-size: 28rpx;
		  font-weight: bold;
		  margin-bottom: 20rpx;
		}
		
		.payment-item {
		  display: flex;
		  align-items: center;
		  padding: 20rpx 0;
		  border-bottom: 1rpx solid #f5f5f5;
		  
		  &:last-child {
		    border-bottom: none;
		  }
		}
		
		.payment-info {
		  display: flex;
		  align-items: center;
		  margin-left: 20rpx;
		  font-size: 26rpx;
		}
		
		.payment-icon {
		  width: 40rpx;
		  height: 40rpx;
		  margin-right: 15rpx;
		}
		
		.upload-area {
		  margin-top: 20rpx;
		  padding-top: 20rpx;
		  border-top: 1rpx dashed #eee;
		}
		
		.upload-btn {
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  justify-content: center;
		  width: 200rpx;
		  height: 200rpx;
		  background-color: #f7f7f7;
		  border-radius: 8rpx;
		  color: #999;
		  font-size: 24rpx;
		}
		
		.footer {
		  position: fixed;
		  bottom: 0;
		  left: 0;
		  right: 0;
		  padding: 20rpx;
		  background-color: #fff;
		  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);
		  
		  /deep/ .u-btn {
		    height: 80rpx;
		    font-size: 30rpx;
		  }
		}	
	}	
</style>